<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绘制时钟表盘</title>
    <style>
        canvas {
            border: 1px solid #333;
        }
    </style>
</head>

<body>
    <canvas id="canvas" width="600" height="600"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');

        // 移动坐标原点到画布中心
        ctx.translate(300, 300);

        // 静态表盘
        function staticClock() {
            // 绘制大圆
            ctx.beginPath();
            ctx.arc(0, 0, 200, 0, Math.PI * 2, false);
            ctx.lineWidth = 7;
            ctx.stroke();

            // 绘制分针刻度辐射线
            for (let i = 0; i < 60; i++) {
                ctx.save();
                ctx.rotate(i * 6 * Math.PI / 180);
                ctx.beginPath();
                ctx.moveTo(0, 0);
                ctx.lineTo(0, -200);
                ctx.lineWidth = 2;
                ctx.stroke();
                ctx.restore();
            }

            // 覆盖分针刻度大圆
            ctx.beginPath();
            ctx.arc(0, 0, 190, 0, Math.PI * 2, false);
            ctx.fillStyle = '#fff';
            ctx.fill();

            // 绘制时针刻度辐射线
            for (let i = 0; i < 12; i++) {
                ctx.save();
                ctx.rotate(i * 30 * Math.PI / 180);
                ctx.beginPath();
                ctx.moveTo(0, 0);
                ctx.lineTo(0, -200);
                ctx.lineWidth = 5;
                ctx.stroke();
                ctx.restore();
            }

            // 覆盖时针刻度大圆
            ctx.beginPath();
            ctx.arc(0, 0, 180, 0, Math.PI * 2, false);
            ctx.fillStyle = '#fff';
            ctx.fill();

            // 绘制表盘上边的文字
            const r = 160; // 小圆半径
            const deg = 30 * Math.PI / 180; // 30°对应的弧度
            const arr = ["III", "IV", "V", "VI", "VII", "VIII", "IX", "X", "XI", "XII", "I", "II"];

            for (let i = 0; i < 12; i++) {
                const x = r * Math.cos(i * deg);
                const y = r * Math.sin(i * deg);
                ctx.fillStyle = "#333";
                ctx.font = "20px Arial";
                ctx.textBaseline = "middle"; //
                ctx.textAlign = "center"; // 文字水平居中
                ctx.fillText(arr[i], x, y);
            }

            // 绘制logo
            ctx.beginPath();
            ctx.font = '18px Arial';
            ctx.fillText('Daniel Wellington', 0, -80);

            // 绘制中间的红点
            drawDot();
        }

        function drawDot(){
            ctx.beginPath();
            ctx.arc(0, 0, 5, 0, Math.PI * 2, false);
            ctx.fillStyle = 'red';
            ctx.fill();
        }

        // 绘制秒针
        function drawSecondLine(){
            const nowTime = new Date();
            const second = nowTime.getSeconds();
            ctx.save();
            ctx.beginPath();
            ctx.rotate(second * 6 * Math.PI / 180);
            ctx.moveTo(0, 50);
            ctx.lineTo(0, -170);
            ctx.lineWidth = 2;
            ctx.strokeStyle = 'blue';
            ctx.stroke();
            ctx.restore();
        }

        // 绘制分针
        function drawMinuteLine(){
            const nowTime = new Date();
            const minute = nowTime.getMinutes();
            const second = nowTime.getSeconds();
            const num = minute * 60 + second;
            ctx.save();
            ctx.beginPath();
            ctx.rotate(num * (6 / 60) * Math.PI / 180);
            ctx.moveTo(0,40);
            ctx.lineTo(0, -155);
            ctx.lineWidth = 3;
            ctx.stroke();
            ctx.restore();
        }

        // 绘制时钟
        function drawHourLine () {
            const nowTime = new Date();
            let hour = nowTime.getHours();
            const minute = nowTime.getMinutes();
            const hourDeg = hour * 30 * Math.PI / 180;
            const minuteDeg = minute * 0.5 * Math.PI / 180;
            ctx.save();
            ctx.beginPath();
            ctx.rotate(hourDeg + minuteDeg);
            ctx.moveTo(0,30);
            ctx.lineTo(0,-140);
            ctx.lineWidth = 4;
            ctx.stroke();
            ctx.restore();
        }

        staticClock();
        drawSecondLine();
        drawMinuteLine();
        drawHourLine(); 
        drawDot();

        // 绘制秒钟
        setInterval(() => {
            // 清除表盘
            ctx.clearRect(-200, -200, 400, 400);
            // 绘制表盘
            staticClock();
            // 绘制秒针
            drawSecondLine();
            // 绘制分针
            drawMinuteLine();
            // 绘制时针
            drawHourLine();
            // 绘制表盘中心点
            drawDot();
        }, 1000);
    </script>
</body>

</html>